<template>
	<view class="homePage">
		<view class="header">
			<navigator url="/pages/headFeatures/settings/accountInformation" class="means">
				<view class="headPortait">
					<image :src="data && data.headPicture ? data.headPicture : '../../static/img/index/defalut_tx.png'"></image>
				</view>
				<view class="healthInformation">
					<view class="realName">{{data ? data.realName : ''}}
						<image src="@/static/img/homePage/healthIcon@2x.png" v-if="healthRank == 1"></image>
						<image src="@/static/img/homePage/healthExperts.png" v-else style="width: 146upx;"></image>
					</view>
					<view class="appellation">{{data ? data.appellations : ''}}</view>
				</view>
			</navigator>
			<view class="bottomModular">
				<navigator url="/pages/headFeatures/member/myMember">{{data && data.serve}}<br/><text>会员管理</text></navigator ><text class="splitLine"></text>
				<navigator url="/pages/quickly/apply/applylist">{{data && data.assessmentCont}}<br/><text>评估申请</text></navigator ><text class="splitLine"></text>
				<navigator url="/pages/headFeatures/execute/executePlan">{{plancount}}<br/><text>计划待办</text></navigator ><text class="splitLine"></text>
				<navigator url="/pages/index/consult">{{totalUnreadCount}}</u-badge><br/><text>健康咨询</text></navigator >
			</view>
		</view>
		
		<view class="mainContent">
			<view class="quicklyCreate">
				<view class="navigation">
					<image src="@/static/img/homePage/orangeIcon.png"></image>
					<text>监测评估</text>
				</view>
				<view class="itemBox">
					<navigator url="/pages/quickly/information/list" class="item" hover-class="none">
						<image src="@/static/img/homePage/information@2x.png"></image>
						<text>会员基本<br>资料</text>
					</navigator>
					<navigator url="/pages/quickly/medicalReport/list" class="item" hover-class="none">
						<image src="@/static/img/homePage/physicalExamination@2x.png"></image>
						<text>体检报告</text>
					</navigator>
					<navigator url="/pages/quickly/healthStatus/navigation" class="item" hover-class="none">
						<image src="@/static/img/homePage/statusAssessment@2x.png"></image>
						<text>健康现状<br>评估</text>
					</navigator>
					<navigator url="/pages/futureDiseases/navigation" class="item" hover-class="none">
						<image src="@/static/img/homePage/futureStatus@2x.png"></image>
						<text>疾病风险<br>评估</text>
					</navigator>
					<navigator url="/pages/currentSummary/list" class="item" hover-class="none">
						<image src="@/static/img/homePage/statusSummary@2x.png"></image>
						<text>健康现状<br>汇总</text>
					</navigator>
					<navigator url="/pages/futureSummary/list" class="item" hover-class="none">
						<image src="@/static/img/homePage/futureSummary@2x.png"></image>
						<text>疾病风险<br>汇总</text>
					</navigator>
					<navigator url="/pages/reportpdf/list" class="item" hover-class="none">
						<image src="@/static/img/homePage/futureSummary@2x.png"></image>
						<text>体检报告<br>汇总</text>
					</navigator>
				</view>
			</view>
			
			<view class="quicklyCreate">
				<view class="navigation">
					<image src="@/static/img/homePage/orangeIcon.png"></image>
					<text>指导干预</text>
				</view>
				<view class="itemBox">
					<navigator url="/pages/quickly/Intervention/list" class="itemNoHeight" hover-class="none">
						<image src="@/static/img/homePage/intervene@2x.png"></image>
						<text>干预方案</text>
					</navigator>
					<navigator url="/pages/quickly/intervenscheme/list" class="itemNoHeight" hover-class="none">
						<image src="@/static/img/homePage/plan@2x.png"></image>
						<text>干预计划</text>
					</navigator>
					<navigator url="/pages/quickly/follow/list" class="itemNoHeight" hover-class="none">
						<image src="@/static/img/homePage/follow@2x.png"></image>
						<text>随访记录</text>
					</navigator>
					<navigator url="/pages/quickly/referral/list" class="itemNoHeight" hover-class="none">
						<image src="@/static/img/homePage/referral@2x.png"></image>
						<text>转诊记录</text>
					</navigator>
					<navigator url="/pages/quickly/article/articlelist" class="itemNoHeight" hover-class="none">
						<image src="@/static/img/homePage/popularScience@2x.png"></image>
						<text>健康科普</text>
					</navigator>
					<navigator url="/pages/quickly/notice/noticelist" class="itemNoHeight" hover-class="none">
						<image src="@/static/img/homePage/sendNotification@2x.png"></image>
						<text>发送通知</text>
					</navigator>
				</view>
			</view>
			
			<view class="quicklyCreate">
				<view class="navigation">
					<image src="@/static/img/homePage/orangeIcon.png"></image>
					<text>其他功能</text>
				</view>
				<view class="itemBox">
					<navigator url="/pages/headFeatures/mail/list" class="itemNoHeight" hover-class="none">
						<image src="@/static/img/homePage/mailList@2x.png"></image>
						<text>通讯录</text>
					</navigator>
					<navigator url="/pages/headFeatures/settings/settings" class="itemNoHeight" hover-class="none">
						<image src="@/static/img/homePage/setUp@2x.png"></image>
						<text>设置</text>
					</navigator>
				</view>			
			</view>
		</view>
	</view>
</template>

<script src="@/static/js/index.js"></script>

<style lang="scss">
	.homePage {
		width: 750upx;
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		padding-bottom: 69upx;
		.header {
			background: url(@/static/img/homePage/background@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 750upx;
			height: 330upx;
			position: fixed;
			top: 88upx;
			left: 0;
			z-index: 100;
			.means {
				padding: 53upx 26upx 0;
				box-sizing: border-box;
				width: 750upx;
				display: flex;
				align-items: center;
				justify-content: center;
				.headPortait {
					width: 120upx;
					height: 120upx;
					border: 4upx solid  rgba(255,255,255,0.3);
					box-sizing: border-box;
					border-radius: 20upx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 20upx;
					}
				}
				.healthInformation {
					flex: 1;
					margin-left: 48upx;
					.realName {
						color: #FFFFFF;
						font-size: 34upx;
						font-weight: bold;	
						display: flex;
						align-items: center;				
						image {
							width: 126upx;
							height: 32upx;
							margin-left: 15upx;
						}
					}
					.appellation {
						color: #ABFFF6;
						font-size: 30upx;
						margin-top: 18upx;
					}
				}
			}
			.bottomModular {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 40upx;
				navigator {
					flex: 1;
					font-size: 46upx;
					color: #FFFFFF;
					text-align: center;
					 line-height: 46upx;
					text {
						font-size: 26upx;
					}
				}
				.splitLine {
					width: 1upx;
					height: 48upx;
					background: #56F4E3;
				}
			}
		}
		.mainContent {
			width: 702upx;
			border-radius: 14upx;
			margin: 330upx auto 0;
			padding-top: 23upx;
			.quicklyCreate {
				background: #FFFFFF;
				width: 100%;
				padding-bottom: 41upx;
				margin-bottom: 24upx;
				border-radius: 14upx;
				.navigation {
					display: flex;
					padding: 33upx 18upx 0;
					box-sizing: border-box;
					align-items: center;
					image {
						width: 8upx;
						height: 24upx;
					}
					text {
						color: #333333;
						font-size: 34upx;
						margin-left: 15upx;
					}
				}
				.itemBox {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					.item,.itemNoHeight {
						width: 25%;
						text-align: center;
						margin-top: 30upx;
						height: 150upx;
						image {
							width: 50upx;
							height: 50upx;
						}
						text {
							display: block;
							margin-top: 8upx;
							color: #333333;
							font-size: 28upx;
						}
					}
					.itemNoHeight {
						height: 100%;
					}
				}
			}
		}
	}
</style>